<template>
  <div class="grade-protection-container">
    <div class="page-header">
      <h2>等级保护</h2>
      <p>等级保护相关的验证功能，确保系统符合网络安全等级保护要求</p>
    </div>

    <div class="protection-content">
      <!-- 等级保护概览 -->
      <a-row :gutter="16" class="overview-section">
        <a-col :span="6">
          <a-card class="stat-card">
            <a-statistic
              title="当前等级"
              value="三级"
              :value-style="{ color: '#1890ff', fontSize: '24px', fontWeight: '600' }"
            >
              <template #prefix>
                <safety-outlined style="color: #1890ff;" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card">
            <a-statistic
              title="合规检查项"
              :value="complianceItems.length"
              suffix="项"
              :value-style="{ color: '#52c41a', fontSize: '24px', fontWeight: '600' }"
            >
              <template #prefix>
                <check-circle-outlined style="color: #52c41a;" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card">
            <a-statistic
              title="通过率"
              :value="passRate"
              :precision="1"
              suffix="%"
              :value-style="{ color: passRate >= 90 ? '#52c41a' : passRate >= 70 ? '#faad14' : '#ff4d4f', fontSize: '24px', fontWeight: '600' }"
            >
              <template #prefix>
                <pie-chart-outlined :style="{ color: passRate >= 90 ? '#52c41a' : passRate >= 70 ? '#faad14' : '#ff4d4f' }" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card">
            <a-statistic
              title="风险等级"
              value="低"
              :value-style="{ color: '#52c41a', fontSize: '24px', fontWeight: '600' }"
            >
                             <template #prefix>
                 <security-scan-outlined style="color: #52c41a;" />
               </template>
            </a-statistic>
          </a-card>
        </a-col>
      </a-row>

      <!-- 验证功能模块 -->
      <div class="config-section">
        <div class="section-header">
          <h3>验证功能模块</h3>
          <a-space>
            <a-button type="primary" @click="runAllChecks">
              <play-circle-outlined />
              执行全部检查
            </a-button>
            <a-button @click="exportReport">
              <download-outlined />
              导出报告
            </a-button>
          </a-space>
        </div>

                          <a-row :gutter="[16, 16]">
           <a-col :span="6" v-for="module in verificationModules" :key="module.key">
                          <a-card
               class="service-card"
               @click="viewDetails(module.key)"
               hoverable
             >
               <div class="service-content">
                 <div class="service-icon" :class="module.key">
                   <component :is="module.icon" />
                 </div>
                 <div class="service-info">
                   <h4>{{ module.name }}</h4>
                   <p>{{ module.description }}</p>
                   <div class="service-status">
                     <a-tag :color="getStatusColor(module.status)">
                       {{ getStatusText(module.status) }}
                     </a-tag>
                     <span class="last-update" v-if="module.lastCheck">
                       {{ module.lastCheck }}
                     </span>
                   </div>
                 </div>
               </div>
             </a-card>
           </a-col>
         </a-row>
      </div>

      <!-- 合规检查清单 -->
      <div class="config-section">
        <div class="section-header">
          <h3>合规检查清单</h3>
          <a-space>
            <a-button @click="refreshChecklist">
              <reload-outlined />
              刷新清单
            </a-button>
          </a-space>
        </div>

                 <a-table
           :columns="complianceColumns"
           :data-source="complianceItems"
           :pagination="{ pageSize: 15, showSizeChanger: true, showQuickJumper: true, showTotal: (total: number, range: [number, number]) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条` }"
           row-key="id"
         >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">
                {{ getStatusText(record.status) }}
              </a-tag>
            </template>
            <template v-if="column.key === 'level'">
              <a-tag :color="getLevelColor(record.level)">
                {{ record.level }}
              </a-tag>
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button size="small" @click="checkItem(record)">
                  <play-circle-outlined />
                  检查
                </a-button>
                <a-button size="small" @click="viewItemDetails(record)">
                  <eye-outlined />
                  详情
                </a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </div>
    </div>

    <!-- 详情弹窗 -->
    <a-modal
      v-model:open="detailModalVisible"
      :title="selectedModule?.name + ' - 检查详情'"
      width="800px"
      :footer="null"
    >
      <div v-if="selectedModule">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="模块名称">{{ selectedModule.name }}</a-descriptions-item>
          <a-descriptions-item label="检查状态">
            <a-tag :color="getStatusColor(selectedModule.status)">
              {{ getStatusText(selectedModule.status) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="最后检查">{{ selectedModule.lastCheck || '未检查' }}</a-descriptions-item>
          <a-descriptions-item label="风险等级">
            <a-tag :color="getLevelColor(selectedModule.riskLevel)">
              {{ selectedModule.riskLevel }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="描述" :span="2">{{ selectedModule.description }}</a-descriptions-item>
        </a-descriptions>

        <div class="detail-content" style="margin-top: 16px;">
          <h4>检查结果</h4>
          <a-list
            :data-source="selectedModule.checkResults || []"
            size="small"
          >
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta>
                  <template #title>
                    <span>{{ item.name }}</span>
                    <a-tag :color="getStatusColor(item.status)" style="margin-left: 8px;">
                      {{ getStatusText(item.status) }}
                    </a-tag>
                  </template>
                  <template #description>{{ item.description }}</template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { message } from 'ant-design-vue'
import {
  SafetyOutlined,
  CheckCircleOutlined,
  PieChartOutlined,
  SecurityScanOutlined,
  PlayCircleOutlined,
  EyeOutlined,
  DownloadOutlined,
  ReloadOutlined,
  LockOutlined,
  DatabaseOutlined,
  MonitorOutlined,
  FileProtectOutlined,
  UserOutlined,
  AuditOutlined,
  WarningOutlined,
  CloudServerOutlined
} from '@ant-design/icons-vue'

// 验证模块数据
const verificationModules = reactive([
  {
    key: 'identity-auth',
    name: '身份鉴别',
    description: '用户身份认证机制验证',
    icon: UserOutlined,
    status: 'passed',
    lastCheck: '2024-01-15 14:30',
    riskLevel: '低',
    checkResults: [
      { name: '密码复杂度', status: 'passed', description: '密码策略符合要求' },
      { name: '多因子认证', status: 'passed', description: 'MFA配置正确' },
      { name: '账户锁定', status: 'passed', description: '失败锁定机制有效' }
    ]
  },
  {
    key: 'access-control',
    name: '访问控制',
    description: '系统访问权限控制验证',
    icon: LockOutlined,
    status: 'warning',
    lastCheck: '2024-01-15 14:25',
    riskLevel: '中',
    checkResults: [
      { name: '角色权限', status: 'passed', description: 'RBAC权限模型正确' },
      { name: '资源访问', status: 'warning', description: '部分资源权限过宽' },
      { name: '会话管理', status: 'passed', description: '会话超时配置合理' }
    ]
  },
  {
    key: 'security-audit',
    name: '安全审计',
    description: '系统安全审计功能验证',
    icon: AuditOutlined,
    status: 'passed',
    lastCheck: '2024-01-15 14:20',
    riskLevel: '低',
    checkResults: [
      { name: '审计日志', status: 'passed', description: '审计日志完整记录' },
      { name: '日志完整性', status: 'passed', description: '日志防篡改机制有效' },
      { name: '审计分析', status: 'passed', description: '异常行为检测正常' }
    ]
  },
  {
    key: 'data-integrity',
    name: '数据完整性',
    description: '数据完整性保护验证',
    icon: DatabaseOutlined,
    status: 'passed',
    lastCheck: '2024-01-15 14:15',
    riskLevel: '低',
    checkResults: [
      { name: '数据校验', status: 'passed', description: '数据完整性校验正常' },
      { name: '备份恢复', status: 'passed', description: '备份策略完善' },
      { name: '传输加密', status: 'passed', description: 'SSL/TLS配置正确' }
    ]
  },
  {
    key: 'data-confidentiality',
    name: '数据保密性',
    description: '敏感数据保密性验证',
    icon: FileProtectOutlined,
    status: 'failed',
    lastCheck: '2024-01-15 14:10',
    riskLevel: '高',
    checkResults: [
      { name: '数据加密', status: 'passed', description: '敏感数据已加密存储' },
      { name: '密钥管理', status: 'failed', description: '密钥轮换策略不完善' },
      { name: '访问日志', status: 'warning', description: '敏感数据访问日志不完整' }
    ]
  },
  {
    key: 'system-monitoring',
    name: '系统监控',
    description: '系统运行状态监控验证',
    icon: MonitorOutlined,
    status: 'passed',
    lastCheck: '2024-01-15 14:05',
    riskLevel: '低',
    checkResults: [
      { name: '性能监控', status: 'passed', description: '系统性能监控正常' },
      { name: '异常告警', status: 'passed', description: '告警机制有效' },
      { name: '日志监控', status: 'passed', description: '日志监控完善' }
    ]
  },
  {
    key: 'intrusion-prevention',
    name: '入侵防范',
    description: '系统入侵检测与防护验证',
    icon: SecurityScanOutlined,
    status: 'warning',
    lastCheck: '2024-01-15 14:00',
    riskLevel: '中',
    checkResults: [
      { name: '入侵检测', status: 'passed', description: 'IDS系统运行正常' },
      { name: '防火墙配置', status: 'warning', description: '部分规则需要优化' },
      { name: '恶意代码防护', status: 'passed', description: '反病毒系统有效' }
    ]
  },
  {
    key: 'malware-protection',
    name: '恶意代码防护',
    description: '恶意代码检测与清除验证',
    icon: WarningOutlined,
    status: 'passed',
    lastCheck: '2024-01-15 13:55',
    riskLevel: '低',
    checkResults: [
      { name: '病毒扫描', status: 'passed', description: '定期病毒扫描正常' },
      { name: '恶意文件检测', status: 'passed', description: '文件上传检测有效' },
      { name: '代码审计', status: 'passed', description: '源代码安全审计通过' }
    ]
  },
  {
    key: 'network-security',
    name: '网络安全',
    description: '网络边界安全防护验证',
    icon: CloudServerOutlined,
    status: 'passed',
    lastCheck: '2024-01-15 13:50',
    riskLevel: '低',
    checkResults: [
      { name: '网络隔离', status: 'passed', description: '网络分段隔离有效' },
      { name: 'VPN配置', status: 'passed', description: 'VPN访问控制正确' },
      { name: '端口管理', status: 'passed', description: '不必要端口已关闭' }
    ]
  },
  {
    key: 'backup-recovery',
    name: '备份恢复',
    description: '数据备份与灾难恢复验证',
    icon: DatabaseOutlined,
    status: 'warning',
    lastCheck: '2024-01-15 13:45',
    riskLevel: '中',
    checkResults: [
      { name: '数据备份', status: 'passed', description: '定期数据备份正常' },
      { name: '备份完整性', status: 'passed', description: '备份数据完整性验证通过' },
      { name: '恢复测试', status: 'warning', description: '灾难恢复演练需要加强' }
    ]
  },
  {
    key: 'physical-security',
    name: '物理安全',
    description: '物理环境安全防护验证',
    icon: LockOutlined,
    status: 'passed',
    lastCheck: '2024-01-15 13:40',
    riskLevel: '低',
    checkResults: [
      { name: '机房访问控制', status: 'passed', description: '机房门禁系统有效' },
      { name: '环境监控', status: 'passed', description: '温湿度监控正常' },
      { name: '设备防护', status: 'passed', description: '关键设备物理防护到位' }
    ]
  },
  {
    key: 'personnel-security',
    name: '人员安全',
    description: '人员安全管理制度验证',
    icon: UserOutlined,
    status: 'passed',
    lastCheck: '2024-01-15 13:35',
    riskLevel: '低',
    checkResults: [
      { name: '人员背景调查', status: 'passed', description: '关键岗位人员背景审查完成' },
      { name: '安全培训', status: 'passed', description: '定期安全意识培训' },
      { name: '权限管理', status: 'passed', description: '人员权限定期审查' }
    ]
  }
])

// 合规检查项数据
const complianceItems = reactive([
  // 身份鉴别
  { id: 1, name: '用户身份标识唯一性', category: '身份鉴别', level: '三级', status: 'passed', description: '确保用户身份标识在系统中唯一' },
  { id: 2, name: '用户身份鉴别信息复杂度', category: '身份鉴别', level: '三级', status: 'passed', description: '密码复杂度符合等保要求' },
  { id: 3, name: '登录失败处理', category: '身份鉴别', level: '三级', status: 'passed', description: '连续登录失败后账户锁定' },
  { id: 4, name: '用户身份标识鉴别', category: '身份鉴别', level: '三级', status: 'passed', description: '对登录用户进行身份标识和鉴别' },
  { id: 5, name: '用户身份鉴别失败处理', category: '身份鉴别', level: '三级', status: 'passed', description: '身份鉴别失败时采取必要措施' },

  // 访问控制
  { id: 6, name: '访问控制策略', category: '访问控制', level: '三级', status: 'warning', description: '基于角色的访问控制策略' },
  { id: 7, name: '权限最小化原则', category: '访问控制', level: '三级', status: 'warning', description: '用户权限遵循最小化原则' },
  { id: 8, name: '访问控制粒度', category: '访问控制', level: '三级', status: 'passed', description: '实现细粒度的访问控制' },
  { id: 9, name: '强制访问控制', category: '访问控制', level: '三级', status: 'warning', description: '实现强制访问控制机制' },
  { id: 10, name: '客体重用', category: '访问控制', level: '三级', status: 'passed', description: '确保客体重用时的安全性' },

  // 安全审计
  { id: 11, name: '审计记录生成', category: '安全审计', level: '三级', status: 'passed', description: '系统生成完整的审计记录' },
  { id: 12, name: '审计记录内容', category: '安全审计', level: '三级', status: 'passed', description: '审计记录包含必要信息' },
  { id: 13, name: '审计记录保护', category: '安全审计', level: '三级', status: 'passed', description: '审计记录防止未授权修改' },
  { id: 14, name: '审计处理失效保护', category: '安全审计', level: '三级', status: 'passed', description: '审计处理失效时的保护措施' },
  { id: 15, name: '审计存储容量', category: '安全审计', level: '三级', status: 'warning', description: '审计记录存储容量管理' },
  { id: 16, name: '审计记录可读性', category: '安全审计', level: '三级', status: 'passed', description: '审计记录应当可读' },

  // 入侵防范
  { id: 17, name: '入侵检测', category: '入侵防范', level: '三级', status: 'warning', description: '入侵行为检测和响应' },
  { id: 18, name: '入侵防护', category: '入侵防范', level: '三级', status: 'passed', description: '对检测到的入侵行为进行防护' },
  { id: 19, name: '恶意代码防范', category: '入侵防范', level: '三级', status: 'passed', description: '防范恶意代码感染和传播' },
  { id: 20, name: '网络攻击防护', category: '入侵防范', level: '三级', status: 'warning', description: '防护常见网络攻击' },

  // 恶意代码防护
  { id: 21, name: '恶意代码检测', category: '恶意代码防护', level: '三级', status: 'passed', description: '检测系统中的恶意代码' },
  { id: 22, name: '恶意代码清除', category: '恶意代码防护', level: '三级', status: 'passed', description: '清除检测到的恶意代码' },
  { id: 23, name: '恶意代码库更新', category: '恶意代码防护', level: '三级', status: 'passed', description: '及时更新恶意代码特征库' },

  // 数据完整性
  { id: 24, name: '数据完整性检验', category: '数据完整性', level: '三级', status: 'passed', description: '重要数据完整性校验' },
  { id: 25, name: '数据备份恢复', category: '数据完整性', level: '三级', status: 'passed', description: '数据备份和恢复机制' },
  { id: 26, name: '数据传输完整性', category: '数据完整性', level: '三级', status: 'passed', description: '数据传输过程完整性保护' },
  { id: 27, name: '数据存储完整性', category: '数据完整性', level: '三级', status: 'passed', description: '数据存储完整性保护' },

  // 数据保密性
  { id: 28, name: '敏感数据加密', category: '数据保密性', level: '三级', status: 'passed', description: '敏感数据加密存储' },
  { id: 29, name: '密钥管理', category: '数据保密性', level: '三级', status: 'failed', description: '加密密钥安全管理' },
  { id: 30, name: '数据传输保密性', category: '数据保密性', level: '三级', status: 'passed', description: '数据传输过程保密性保护' },
  { id: 31, name: '数据存储保密性', category: '数据保密性', level: '三级', status: 'warning', description: '数据存储保密性保护' },
  { id: 32, name: '剩余信息保护', category: '数据保密性', level: '三级', status: 'passed', description: '防止剩余信息泄露' },

  // 资源控制
  { id: 33, name: '通信流量控制', category: '资源控制', level: '三级', status: 'passed', description: '控制通信流量避免拥塞' },
  { id: 34, name: '网络带宽控制', category: '资源控制', level: '三级', status: 'warning', description: '控制网络带宽使用' },
  { id: 35, name: '存储容量控制', category: '资源控制', level: '三级', status: 'passed', description: '控制存储容量使用' },
  { id: 36, name: '处理能力控制', category: '资源控制', level: '三级', status: 'passed', description: '控制系统处理能力分配' },

  // 系统监控
  { id: 37, name: '系统资源监控', category: '系统监控', level: '三级', status: 'passed', description: '系统资源使用情况监控' },
  { id: 38, name: '安全事件监控', category: '系统监控', level: '三级', status: 'passed', description: '安全相关事件监控' },
  { id: 39, name: '网络流量监控', category: '系统监控', level: '三级', status: 'passed', description: '网络流量实时监控' },
  { id: 40, name: '用户行为监控', category: '系统监控', level: '三级', status: 'warning', description: '用户操作行为监控' },
  { id: 41, name: '系统状态监控', category: '系统监控', level: '三级', status: 'passed', description: '系统运行状态监控' },

  // 网络安全
  { id: 42, name: '网络架构安全', category: '网络安全', level: '三级', status: 'passed', description: '网络架构安全设计' },
  { id: 43, name: '通信传输安全', category: '网络安全', level: '三级', status: 'passed', description: '网络通信传输安全' },
  { id: 44, name: '可信验证安全', category: '网络安全', level: '三级', status: 'warning', description: '网络设备可信验证' },
  { id: 45, name: '边界防护', category: '网络安全', level: '三级', status: 'passed', description: '网络边界安全防护' },
  { id: 46, name: '访问控制', category: '网络安全', level: '三级', status: 'passed', description: '网络访问控制' },

  // 设备安全
  { id: 47, name: '身份鉴别', category: '设备安全', level: '三级', status: 'passed', description: '设备身份鉴别机制' },
  { id: 48, name: '访问控制', category: '设备安全', level: '三级', status: 'passed', description: '设备访问控制' },
  { id: 49, name: '安全审计', category: '设备安全', level: '三级', status: 'passed', description: '设备安全审计' },
  { id: 50, name: '软件容错', category: '设备安全', level: '三级', status: 'warning', description: '设备软件容错能力' },
  { id: 51, name: '资源控制', category: '设备安全', level: '三级', status: 'passed', description: '设备资源控制' },

  // 应用安全
  { id: 52, name: '身份鉴别', category: '应用安全', level: '三级', status: 'passed', description: '应用系统身份鉴别' },
  { id: 53, name: '访问控制', category: '应用安全', level: '三级', status: 'warning', description: '应用系统访问控制' },
  { id: 54, name: '安全审计', category: '应用安全', level: '三级', status: 'passed', description: '应用系统安全审计' },
  { id: 55, name: '软件容错', category: '应用安全', level: '三级', status: 'warning', description: '应用软件容错能力' },
  { id: 56, name: '资源控制', category: '应用安全', level: '三级', status: 'passed', description: '应用系统资源控制' },

  // 数据安全
  { id: 57, name: '数据完整性', category: '数据安全', level: '三级', status: 'passed', description: '数据完整性保护' },
  { id: 58, name: '数据保密性', category: '数据安全', level: '三级', status: 'warning', description: '数据保密性保护' },
  { id: 59, name: '数据备份恢复', category: '数据安全', level: '三级', status: 'passed', description: '数据备份恢复' },
  { id: 60, name: '剩余信息保护', category: '数据安全', level: '三级', status: 'passed', description: '剩余信息保护' }
])

// 表格列定义
const complianceColumns = [
  { title: '检查项', dataIndex: 'name', key: 'name', width: 200 },
  { title: '类别', dataIndex: 'category', key: 'category', width: 120 },
  { title: '等级', dataIndex: 'level', key: 'level', width: 80 },
  { title: '状态', dataIndex: 'status', key: 'status', width: 100 },
  { title: '描述', dataIndex: 'description', key: 'description' },
  { title: '操作', key: 'action', width: 150 }
]

// 弹窗状态
const detailModalVisible = ref(false)
const selectedModule = ref<any>(null)

// 计算通过率
const passRate = computed(() => {
  const total = complianceItems.length
  const passed = complianceItems.filter(item => item.status === 'passed').length
  return total > 0 ? (passed / total) * 100 : 0
})

// 工具方法
const getStatusColor = (status: string): string => {
  const colors: Record<string, string> = {
    'passed': 'success',
    'warning': 'warning',
    'failed': 'error',
    'pending': 'default'
  }
  return colors[status] || 'default'
}

const getStatusText = (status: string): string => {
  const texts: Record<string, string> = {
    'passed': '通过',
    'warning': '警告',
    'failed': '失败',
    'pending': '待检查'
  }
  return texts[status] || '未知'
}

const getLevelColor = (level: string): string => {
  const colors: Record<string, string> = {
    '低': 'success',
    '中': 'warning',
    '高': 'error',
    '一级': 'blue',
    '二级': 'cyan',
    '三级': 'purple',
    '四级': 'orange'
  }
  return colors[level] || 'default'
}

// 功能方法
const runAllChecks = () => {
  message.loading('正在执行全部检查...', 3)
  setTimeout(() => {
    message.success('全部检查完成')
    // 更新检查时间
    verificationModules.forEach(module => {
      module.lastCheck = new Date().toLocaleString('zh-CN')
    })
  }, 3000)
}

const runSingleCheck = (moduleKey: string) => {
  const module = verificationModules.find(m => m.key === moduleKey)
  if (module) {
    message.loading(`正在检查${module.name}...`, 2)
    setTimeout(() => {
      module.lastCheck = new Date().toLocaleString('zh-CN')
      message.success(`${module.name}检查完成`)
    }, 2000)
  }
}

const viewDetails = (moduleKey: string) => {
  selectedModule.value = verificationModules.find(m => m.key === moduleKey)
  detailModalVisible.value = true
}

const checkItem = (item: any) => {
  message.loading(`正在检查${item.name}...`, 1)
  setTimeout(() => {
    message.success(`${item.name}检查完成`)
  }, 1000)
}

const viewItemDetails = (item: any) => {
  message.info(`查看${item.name}详情功能开发中...`)
}

const exportReport = () => {
  message.success('等级保护合规报告导出功能开发中...')
}

const refreshChecklist = () => {
  message.loading('正在刷新检查清单...', 1)
  setTimeout(() => {
    message.success('检查清单已刷新')
  }, 1000)
}
</script>

<style scoped>
.grade-protection-container {
  background: #f8fafc;
  min-height: 100vh;
  padding: 24px;
}

.page-header {
  margin-bottom: 32px;
  text-align: center;
  padding: 32px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
}

.page-header h2 {
  margin: 0 0 12px 0;
  font-size: 32px;
  font-weight: 700;
  color: white;
}

.page-header p {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.protection-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.overview-section {
  margin-bottom: 32px;
}

.stat-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.config-section {
  margin-bottom: 40px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e8e8e8;
}

.section-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
}

.service-card {
  border-radius: 12px;
  border: 2px solid #e8e8e8;
  transition: all 0.3s ease;
  cursor: pointer;
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.service-card.configured {
  border-color: #52c41a;
  background: linear-gradient(135deg, #f6ffed 0%, #f0f9e8 100%);
}

.service-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  flex-shrink: 0;
}

.service-icon.identity-auth {
  background: linear-gradient(135deg, #1890ff, #096dd9);
}

.service-icon.access-control {
  background: linear-gradient(135deg, #f5222d, #cf1322);
}

.service-icon.security-audit {
  background: linear-gradient(135deg, #52c41a, #389e0d);
}

.service-icon.data-integrity {
  background: linear-gradient(135deg, #52c41a, #389e0d);
}

.service-icon.data-confidentiality {
  background: linear-gradient(135deg, #722ed1, #531dab);
}

.service-icon.system-monitoring {
  background: linear-gradient(135deg, #fa8c16, #d46b08);
}

.service-icon.intrusion-prevention {
  background: linear-gradient(135deg, #1890ff, #096dd9);
}

.service-icon.malware-protection {
  background: linear-gradient(135deg, #fa8c16, #d46b08);
}

.service-icon.network-security {
  background: linear-gradient(135deg, #1890ff, #096dd9);
}

.service-icon.backup-recovery {
  background: linear-gradient(135deg, #52c41a, #389e0d);
}

.service-icon.physical-security {
  background: linear-gradient(135deg, #f5222d, #cf1322);
}

.service-icon.personnel-security {
  background: linear-gradient(135deg, #1890ff, #096dd9);
}

.service-info {
  flex: 1;
}

.service-info h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.service-info p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

.service-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.last-update {
  font-size: 12px;
  color: #9ca3af;
}

.detail-content h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .grade-protection-container {
    padding: 16px;
  }

  .page-header {
    padding: 24px 16px;
  }

  .protection-content {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .module-content {
    flex-direction: column;
    text-align: center;
  }

  .module-actions {
    justify-content: center;
  }
}
</style>